import React, { useState, useEffect } from 'react';
import './index.scss';
import { NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom';
function App() {
    const navigate = useNavigate();
    // 存储聊天消息的状态，每个消息是一个包含发送者和内容的对象
    const [messages, setMessages] = useState([]);
    // 存储输入框中输入的消息内容的状态
    const [inputMessage, setInputMessage] = useState('');

    // 模拟发送消息到后端（这里只是简单更新前端状态，实际要和后端交互）
    const sendMessage = () => {
        if (inputMessage.trim() !== '') {
            // 假设当前用户名为 "User"，你可以修改为获取真实用户名的逻辑
            const newMessage = { sender: "User", content: inputMessage };
            setMessages([...messages, newMessage]);
            setInputMessage('');
        }
    };

    // 模拟接收消息（这里只是简单示例，实际会通过后端推送等机制更新）
    useEffect(() => {
        // 可以在这里编写真实从后端获取消息并更新状态的逻辑
        // 比如通过WebSocket等方式监听消息并调用setMessages更新消息列表
        const mockNewMessage = { sender: "-归属-", content: "这是一条模拟消息" };
        // 模拟定时接收新消息，实际应用不会这样简单定时，而是实时接收
        const interval = setInterval(() => {
            setMessages([...messages, mockNewMessage]);
        }, 5000);
        return () => clearInterval(interval);
    }, [messages]);

    return (
        <div className="chat-room">
            <NavBar
                title="私人医生"
                leftText="返回"
                rightText="服务承诺"
                onClickLeft={() => navigate(-1)}
            />
            <h1>反馈/投诉</h1>
            <div className="message-list">
                {messages.map((message, index) => (
                    <div key={index} className={`message ${message.sender === "User" ? "user-message" : "other-message"}`}>
                        <strong>{message.sender}:</strong> {message.content}
                    </div>
                ))}
            </div>
            <div className="input-area">
                <input
                    type="text"
                    placeholder="输入消息"
                    value={inputMessage}
                    onChange={(e) => setInputMessage(e.target.value)}
                />
                <button onClick={sendMessage}>发送</button>
            </div>
        </div>
    );
}

export default App;
